<template>
  <base-page-view class-name="page-container want-to-buy-user-container">
    <template v-if="!loading">
      <view class="header">
        <b-image src="/static/images/app/wantToBuy/user_bg.png" :is-asset="true" mode="widthFix" />
        <div class="header-content">
          <view class="user-info">
            <view class="avatar large">
              <b-image v-if="userInfo.head_img_url" :src="userInfo.head_img_url" mode="aspectFill" />
              <b-image v-else src="/static/images/app_logo.png" mode="aspectFill" />
            </view>
            <view class="sub-item">
              <view class="nickname">{{ userInfo.nick_name }}</view>
              <view>加入碧选{{ userInfo.joinDays || 1 }}天</view>
            </view>
            <view class="attention-btn" @click="downloadApp">+ 关注</view>
          </view>
          <b-image src="/static/images/app/wantToBuy/user_line.png" :is-asset="true" mode="widthFix" />
          <view class="signature">{{ userInfo.signature || '这个家伙很懒，什么都没留下' }}</view>
        </div>
      </view>
      <view class="data-block">
        <view class="data-item">
          <view>{{ userInfo.my_attention_num || 0 }}</view>
          <view class="title">我的关注</view>
        </view>
        <view class="data-item">
          <view>{{ userInfo.attention_my_num || 0 }}</view>
          <view class="title">关注我的</view>
        </view>
        <view class="data-item">
          <view>{{ userInfo.praise_num || 0 }}</view>
          <view class="title">获赞</view>
        </view>
      </view>
      <view class="tabs-block">
        <view class="tab-item" :class="{ active: currentTab === 'my_article'}" @click="tabClick('my_article')">我的心得</view>
        <view class="tab-item" :class="{ active: currentTab === 'my_praise'}" @click="tabClick('my_praise')">我赞过的</view>
      </view>
      <view class="list-block">
        <template v-if="!listLoading">
          <view v-if="list.length">
            <view v-for="(item, index) in list" :key="index" class="item" @click="downloadApp">
              <view class="user">
                <view class="avatar">
                  <b-image v-if="item.head_img_url" :src="item.head_img_url" mode="aspectFill" />
                  <b-image v-else src="/static/images/app_logo.png" mode="aspectFill" />
                </view>
                <view class="sub-item">
                  <view class="nickname">{{ item.nick_name }}</view>
                  <view>{{ item.created_at | formatDate('MM-dd') }}</view>
                </view>
              </view>
              <view class="content">
                <view class="text">{{ item.content }}</view>
                <view v-if="item.resource_object_list && item.resource_object_list.length" class="resource">
                  <view v-for="(imgItem, imgIndex) in item.resource_object_list" :key="imgIndex" class="resource-item">
                    <video v-if="imgItem.videoPreviewImg" :src="imgItem.resourceUrl" :poster="imgItem.videoPreviewImg"></video>
                    <b-image v-else :src="imgItem.resourceUrl" mode="aspectFit" />
                  </view>
                </view>
              </view>
              <view v-if="item.goods && item.goods.length" class="goods">
                <view v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex" class="goods-item" @click.stop="toGoodsDetail(goodsItem)">
                  <view class="goods-image">
                    <b-image :src="goodsItem.goods_image_url" mode="aspectFit" />
                  </view>
                  <view class="goods-detail">
                    <view class="goods-name">{{ goodsItem.goods_name }}</view>
                    <view class="goods-price">￥{{ goodsItem.price | formatMoney }}</view>
                  </view>
                </view>
              </view>
              <view class="num-detail">
                <view class="num-item">
                  <image src="/static/images/icon/icon_parise.png" mode="aspectFit" />
                  点赞{{ item.praise_num }}次</view>
                <view class="num-item">
                  <image src="/static/images/icon/icon_share.png" mode="aspectFit" />
                  分享{{ item.share_num }}次
                </view>
              </view>

            </view>
          </view>
          <view v-else class="empty-state">
            <b-image src="/static/images/app/wantToBuy/empty.png" :is-asset="true" mode="widthFix" />
          </view>
        </template>
      </view>
      <view class="download-block" @click="downloadApp">
        <b-image src="/static/images/app/wantToBuy/download-btn.png" :is-asset="true" mode="widthFix" />
      </view>
    </template>
  </base-page-view>
</template>
<script>
import './user.scss'
export default {
  name: 'WantToBuyUser',
  data() {
    return {
      loading: true,
      currentTab: 'my_article',
      userId: '',
      share_code: '',
      userInfo: {},
      listLoading: true,
      list: []
    }
  },
  onLoad(option) {
    this.userId = option.userId
    this.share_code = option.invite_code || option.share_code
    if (this.userId) {
      this.fetchData()
      this.fetchArticleList()
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      const res = await this.$api.appApi.getWantToBuyUser({
        userId: this.userId
      })
      if (res.success && res.data) {
        this.userInfo = {
          ...res.data,
          joinDays: Math.floor((new Date().getTime() - res.data.user_create_time * 1000) / (1000 * 60 * 60 * 24)) + 1
        }
      }
      this.loading = false
    },
    async fetchArticleList() {
      this.listLoading = true
      const res = await this.$api.appApi.getWantToBuyUserArticleList({
        userId: this.userId,
        pageNum: 1,
        pageSize: 10
      }, this.currentTab === 'my_praise')
      if (res.success && res.data) {
        this.list = res.data
      }
      this.listLoading = false
    },
    tabClick(tab) {
      this.currentTab = tab
      this.fetchArticleList()
    },
    toGoodsDetail(item) {
      let share_str = ''
      if (this.share_code) {
        share_str = `&share_code=${this.share_code}`
      }
      const urlParams = encodeURIComponent(`/pagesDetail/commodity/index?id=${item.goods_id}&from_type=1&activity_id=&goods_id=${item.goods_id}&goods_type=${item.goods_type}&pack_type=${item.pack_type}${share_str}`)
      const url = `${process.env.VUE_APP_PRE_URL}/pages/share/index?path=${urlParams}`
      console.log(url)
      // #ifdef H5
      window.open(url)
      // #endif
    },
    downloadApp() {
      this.$sensorTrack('CLICKBUTTON', {
        page_name: 'share_grass_men',
        button_name: 'open'
      })
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      const url = isAndroid ? 'https://android.myapp.com/myapp/detail.htm?apkName=com.bisinuolan.app&ADTAG=mobile' : 'https://itunes.apple.com/cn/app/id1243270000'
      // #ifdef H5
      window.open(url)
      // #endif
    }
  }
}
</script>
